<template>
	<view class="wrap">
		<view class="signWrap">
			<input type="text" name="" id="" placeholder="请用手机号注册账号" v-model="username"/>
			<input type="text" name="" id="" placeholder="账号密码由大写字母开头六位" v-model="password"/>
			<view class="signBtn" @click="sign()">立即注册</view>
			<view class="loginTxt">已有账号？<navigator url="/pages/login/login">爬去登录</navigator></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList:[],
				username:"",
				password:""
			}
		},
		created() {
			if(uni.getStorageSync("userList")){
				this.userList = uni.getStorageSync("userList")
			}else{
				this.userList = []
			}
		},
		methods: {
			sign(){
				//1.先与用户列表中的数据进行判断,如果存在用户名相同,则返回用户名已存在,否则将用户的信息存入本地
				//手机正则,密码正则
				let state = false
				this.userList.forEach(v=>{
					if(v.username==this.username){
						state = true
					}
				})
				if(!state){
					//手机正则
					let phoneReg = /^[1][3,5,7,8,9][0-9]{9}/
					let passReg = /[0-9a-zA-Z]{6}/
					let state = false
					if(phoneReg.test(this.username)){
						state = true
					}
					if(state){
						if(passReg.test(this.password)){
							let obj = {"username":this.username,"password":this.password}
							this.userList.push(obj)
							uni.setStorageSync("userList",this.userList)
							uni.showToast({
								title:"注册成功!"
							})
						}else{
							uni.showToast({
								title:"输入的密码不符合规范!",
								icon:"error"
							})
						}
					}else{
						uni.showToast({
							title:"输入的账号不符合规范!",
							icon:"error"
						})
					}
				}else{
					uni.showToast({
						title:"该用户名已存在!",
						icon:"error"
					})
				}
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		padding: 30rpx;
		.signWrap{
			display: flex;
			flex-direction: column;
			align-items: center;
			input,.signBtn{
				width: 600rpx;
				height: 80rpx;
				border: 2rpx solid skyblue;
				border-radius: 30rpx;
				margin: 15rpx 0;
			}
			input{
				padding: 0 30rpx;
				font-size: 28rpx;
			}
			.signBtn{
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: skyblue;
				color: white;
			}
			.loginTxt{
				display: flex;
				justify-content: center;
				navigator{
					color: skyblue;
					text-decoration: underline;
				}
			}
		}
	}
</style>
